import { listCuesIndustry } from '@/services/api/api-cues-industry';
import {
  BarsOutlined,
  DatabaseOutlined,
  HddOutlined,
  OneToOneOutlined,
  ReconciliationOutlined,
  SendOutlined,
} from '@ant-design/icons';
import { DrawerForm, PageContainer } from '@ant-design/pro-components';
import { Badge, Menu } from 'antd';
// import { SelectInfo } from 'rc-menu/lib/interface';
import React, { useEffect, useState } from 'react';
import { useAccess, history, useModel } from 'umi';
import './index.less';
import AddTopic from './topic/topic/components/AddTopic';
import TableIntelligentRecommendation from './topic/topic/table/TableIntelligentRecommendation';
import TableTopicAssist from './topic/topic/table/TableTopicAssist';
import TableTopicManage from './topic/topic/table/TableTopicManage';
import TableTopicMedia from './topic/topic/table/TableTopicMedia';
import TableTopicRender from './topic/topic/table/TableTopicRender';
import { parse } from '@/utils/historyUtils';
import { getToken, setToken } from '@/utils/token';

export default (): React.ReactNode => {
  const access = useAccess();
  const [selectMenuName, setSelectMenuName] = useState<string>('选题计划');
  const [menuVisible,setMenuVisible]=useState(false)
  const [tabActiveKey, setTabActiveKeyState] = useState<string>(
    access.线索征集x配置x管理员
      ? 'TableTopicRender'
      : access.线索征集x配置x部门需求者 || access.线索征集x配置x媒体需求者
        ? 'TableTopicMedia'
        : access.线索征集x配置x提供者
          ? 'TableTopicRender'
          : '',
  );
  useEffect(() => {
    const { token } = parse(location.search) as { token: string };
    console.log(token);

    if (token && token.length > 0) {
      console.log('33333333333');
      setToken(token)
    }
  }, [])

  // const [tabActiveKey, setTabActiveKeyState] = useState<string>('TableTopicRender')

  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };

  const menuList = () => {
    if (access.线索征集x配置x管理员) {
      return [
        {
          label: <span>选题计划{renderBadge(0, tabActiveKey === 'TableTopicRender')}</span>,
          key: 'TableTopicRender',
          icon: <SendOutlined />,
        },
        // {
        //   label: <span>选题审批{renderBadge(0, tabActiveKey === 'TableTopicManage')}</span>,
        //   key: 'TableTopicManage',
        //   icon: <DatabaseOutlined />,
        // },
        // {
        //   label: '上报资源',
        //   key: 'TableSubmit',
        //   icon: <ProfileOutlined />,
        // },
        {
          label: (
            <span>智能选题推荐{renderBadge(0, tabActiveKey === 'IntelligentRecommendation')}</span>
          ),
          key: 'IntelligentRecommendation',
          icon: <ReconciliationOutlined />,
        },
      ];
    } else if (access.线索征集x配置x部门需求者 || access.线索征集x配置x媒体需求者) {
      return [
        {
          label: <span>我的选题计划{renderBadge(0, tabActiveKey === 'TableTopicMedia')}</span>,
          key: 'TableTopicMedia',
          icon: <SendOutlined />,
        },
        // {
        //   label: (
        //     <span>
        //       {access.线索征集x配置x部门需求者 ? '联动选题计划' : '协作选题计划'}
        //       {renderBadge(0, tabActiveKey === 'TableTopicAssist')}
        //     </span>
        //   ),
        //   key: 'TableTopicAssist',
        //   icon: <OneToOneOutlined />,
        // },
        // {
        //   label: '上报资源',
        //   key: 'TableSubmit',
        //   icon: <ProfileOutlined />,
        // },
        {
          label: (
            <span>智能选题推荐{renderBadge(0, tabActiveKey === 'IntelligentRecommendation')}</span>
          ),
          key: 'IntelligentRecommendation',
          icon: <ReconciliationOutlined />,
        },
      ];
    } else if (access.线索征集x配置x提供者) {
      return [
        {
          label: <span>选题计划{renderBadge(0, tabActiveKey === 'TableTopicRender')}</span>,
          key: 'TableTopicRender',
          icon: <SendOutlined />,
        },

        {
          label: <span>我的选题计划{renderBadge(0, tabActiveKey === 'TableTopicMedia')}</span>,
          key: 'TableTopicMedia',
          icon: <HddOutlined />,
        },
        // {
        //   label: <span>联动选题计划{renderBadge(0, tabActiveKey === 'TableTopicAssist')}</span>,
        //   key: 'TableTopicAssist',
        //   icon: <OneToOneOutlined />,
        // },
        // {
        //   label: '上报资源',
        //   key: 'TableSubmit',
        //   icon: <ProfileOutlined />,
        // },
        {
          label: (
            <span>智能选题推荐{renderBadge(0, tabActiveKey === 'IntelligentRecommendation')}</span>
          ),
          key: 'IntelligentRecommendation',
          icon: <ReconciliationOutlined />,
        },
      ];
    } else {
      return [];
    }
  };
  /**
   * 行业
   */
  const [industryIds, setIndustryIdsState] = useState<any[]>([]);

  /**
   * 加载 行业 列表
   * @param key
   */
  const loadCuesIndustryData = async () => {
    try {
      const response = await listCuesIndustry();

      setIndustryIdsState(
        response.data.map((item) => {
          return { label: item.name, value: item.id };
        }),
      );
    } catch (error) { }
  };

  useEffect(() => {
    loadCuesIndustryData();
  }, []);

  const [loading, setLoadingState] = useState<boolean>(false);

  return (
    <PageContainer
      header={{
        // title:
        title: (
          <div>
            <DrawerForm
              width="200px"
              trigger={<BarsOutlined style={{ fontSize: 20 }} />}
              drawerProps={{
                destroyOnClose: true,
                placement: 'left',
                closable: false,
              }}
              visible={menuVisible}
              onVisibleChange={(visible: boolean) => {
                if (visible) {
                }
                setMenuVisible(visible)
              }}
              submitter={false}
              onFinish={async (values) => { }}
            >
              <Menu
                onSelect={(info) => {
                  const key = info.key;
                  let menuName = '';
                  if (key === 'TableTopicRender') {
                    menuName = '选题计划';
                  }
                  if (key === 'TableTopicManage') {
                    menuName = '选题审批';
                  }
                  if (key === 'TableTopicMedia') {
                    menuName = '我的选题计划';
                  }
                  // if (key === 'TableTopicAssist') {
                  //   if (access.线索征集x配置x部门需求者 || access.线索征集x配置x媒体需求者) {
                  //     menuName = access.线索征集x配置x部门需求者 ? '联动选题计划' : '协作选题计划';
                  //   } else {
                  //     menuName = '联动选题计划';
                  //   }
                  // }
                  if (key === 'TableSubmit') {
                    menuName = '报送资源';
                  }
                  if (key === 'IntelligentRecommendation') {
                    menuName = '智能选题推荐';
                  }
                  setMenuVisible(!menuVisible)
                  setTabActiveKeyState(info.key);
                  setSelectMenuName(menuName);
                }}
                style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
                defaultSelectedKeys={[tabActiveKey]}
                mode="vertical"
                items={menuList()}
              />
            </DrawerForm>
            <span style={{ marginLeft: 10 }}>{selectMenuName}</span>
          </div>
        ),
        breadcrumb: {
          items: [],
        },
        style: {
          paddingBlockEnd: 0,
        },
        extra: (
          <>
            {access.线索征集x创建选题计划 && (
              <AddTopic
                key="add_topic"
                onRefurbish={() => {
                  setLoadingState(true);
                }}
              />
            )}
          </>
        ),
      }}
    >
      {/* <Divider /> */}
      {tabActiveKey === 'TableTopicRender' ? (
        <TableTopicRender
          mode={1}
          loading={loading}
          industryIds={industryIds}
          onRefurbish={() => {
            setLoadingState(false);
          }}
        />
      ) : tabActiveKey === 'TableTopicManage' ? (
        <TableTopicManage
          mode={3}
          loading={loading}
          industryIds={industryIds}
          onRefurbish={() => {
            setLoadingState(false);
          }}
        />
      ) : tabActiveKey === 'TableTopicMedia' ? (
        <TableTopicMedia
          mode={2}
          loading={loading}
          industryIds={industryIds}
          onRefurbish={() => {
            setLoadingState(false);
          }}
        />
      ) : tabActiveKey === 'TableTopicAssist' ? (
        <TableTopicAssist
          mode={4}
          loading={false}
          industryIds={[]}
          onRefurbish={function (): void {
            throw new Error('Function not implemented.');
          }}
        />
      ) : tabActiveKey === 'IntelligentRecommendation' ? (
        <TableIntelligentRecommendation
          mode={1}
          loading={false}
          onRefurbish={() => {
            setLoadingState(false);
          }}
        />
      ) : (
        // <TableSubmit isEditable={false} />
        <></>
      )}
    </PageContainer>
  );
};
